<!DOCTYPE html>
<!-- saved from url=(0048)http://v3.bootcss.com/examples/navbar-fixed-top/ -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./img/icon.png">

    <title>在线交流 - 旅游网络系统</title>

    <!-- Bootstrap core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
	
	<link href="./css/navbar-fixed-top.css" rel="stylesheet">
	<link href="./css/index.css" rel="stylesheet">
	
    

	<style>
		#account_bind_modal .modal-dialog {
			max-width: 360px;
		}
		#content_left {
			padding-left: 15px;
			padding-right: 15px;
			margin-bottom: 20px;
		}
		@media (max-width: 768px){
			#content_left {
				height: 260px;
			}
			#content_left img {
				float: left;
				margin-right: 15px;
			}
		}
		@media (min-width: 768px) {
			#content_left {
				position: absolute;
				width: 260px;
			}
			#content_right {
				left: 290px;
				margin-left: 260px;
			}
			#base_setting .control-label {
				/*width: 6em;*/
			}
		}
		.user_ach {
			color:black;
			font-size: 16px;
			margin:4px 4px 4px 4px;
			padding: 5px 10px 5px 10px;
			display: block;
			float: left;
			background-color: #DEC;
			border: 1px solid #DEC;
			border-radius: 5px;
			text-decoration: none;
		}
		.user_ach:hover {
			background-color: #FEA;
			border-radius: 5px;
			border: 1px solid #C60;
			text-decoration: none;
			color: darkred;
		}
		.err-msg-label {
			display: none
		}
		.has-error .err-msg-label {
			display: block
		}
		
		.question {
			padding: 15px;
		}
		.comments {
			/*padding-left: 0px;*/
			border: 1px solid #ddd;
			border-radius: 4px;
		}
		.answer {
			padding: 15px;
			/*border: 1px solid #ddd;
			border-radius: 4px;*/
		}
		.attention {
			border-bottom: 1px solid #eee;
			padding-bottom: 15px;
		}
		.edit {
			padding-left: 0px;
			width: 70px;
			font-size: 16px;
			font-weight: bold;
			border-left: none;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
			cursor: pointer;
		}
		.replay {
			padding-left: 0px;
			width: 70px;
			font-weight: bold;
			border-left: none;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
			cursor: pointer;
		}
		.textbox {
			padding-left: 0px;
			padding-right: 0px;
		}
		.span_hover {
			color: #337ab7;
		}
		.span_hover:hover {
			color: #23527c;;
		}
		.input_textarea {
			display: block;
			width: 850px;
			padding: 6px 15px;
			font-size: 14px;
			line-height: 1.42857143;
			color: #555;
			background-color: #fff;
			background-image: none;
			border: 1px solid #ccc;
			border-radius: 4px;
		}
	</style>
</head>
<body>
	<?php
		require "header.php";
	?>
	<?php
		require "nav.php";
	?>
	<div class="container center-block">
		<div class="page-header ">
			<p style="font-size: 20px; color: #337ab7;">在线交流</p>
		</div>
		<div class="row">
			<div class="col-md-9 col-md-offset-1 question">
				<span class="span_hover" data-toggle="collapse" data-target="#addcomments" onclick="return false;" style="cursor: pointer;"><strong>提问</strong></span>
			</div>
		</div>
		<div class="row">
			<div class="col-md-9 col-md-offset-1 attention">
				<div id="addcomments" class="collapse" style="padding-top: 15px;">
					<textarea id="add_comm"  placeholder="写下你的问题…" autoHeight="true" class="input_textarea" style="resize: none; min-height: 52px; overflow:hidden;"></textarea>
					<div class="col-md-offset-10">
						<a onclick="return false;" style="text-decoration: none;" data-toggle="collapse" data-parent="" data-target="#addcomments">
							<button type="button" class="btn btn-default navbar-btn">取消</button>
						</a>
						<a>
							<!--
							<button type="submit" class="btn btn-primary navbar-btn">评论</button>
							-->
							<button onclick="ajax_add_comments();" class="btn btn-primary navbar-btn">提问</button>
						</a>
					</div>								
				</div>
			</div>
		</div>
		<?php
			include('./db/dbconn.php');
			$sql = "select count(*) from comments";
			$check_query = mysqli_query($conn, $sql);
			$row = mysqli_fetch_array($check_query);
			$num = $row[0];
			
			$sql = "select comm_id, comm_title, comm_title_time, comm_title_name, comm_replay, comm_replay_name, comm_replay_time from comments order by comm_id desc";
			$check_query = mysqli_query($conn, $sql);
			$i = 0;
			while ($result = mysqli_fetch_array($check_query)) {
				$id = $result['comm_id'];
				$title = $result['comm_title'];
				$title = iconv('gbk', 'utf-8', $title);
				
				$title_name = $result['comm_title_name'];
				$title_name = iconv('gbk', 'utf-8', $title_name);
				
				$title_time = $result['comm_title_time'];
				$title_time = iconv('gbk', 'utf-8', $title_time);
				
				$replay = $result['comm_replay'];
				$replay = iconv('gbk', 'utf-8', $replay);
				
				$replay_name = $result['comm_replay_name'];
				$replay_name = iconv('gbk', 'utf-8', $replay_name);
				
				$replay_time = $result['comm_replay_time'];
				$replay_time = iconv('gbk', 'utf-8', $replay_time);
				$i++;
				//echo $id." ".$title." ".$replay;
		?>
		<div class="row">
			<div class="col-md-9 col-md-offset-1 question">
				<strong>Q<?php echo $i;?> : </strong><?php echo $title;?>
				<span class="pull-right" style="cursor: pointer; color: #337ab7;"><?php echo $title_time." ".$title_name; ?></span>
			</div>
		</div>
		<div class="row">
			<div class="col-md-9 col-md-offset-1 attention">
				<div style="cursor: pointer;" onselectstart="return false;">
					<!-- 回复 -->
					<span class="glyphicon glyphicon-share-alt"></span>
					<span class="span_hover" data-toggle="collapse" data-target="#textbox<?php echo $id; ?>" onclick="return false;">回复</span>
					<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<!-- 查看评论 -->
					<span class="glyphicon glyphicon-comment"></span>
					<span id="span_comments<?php echo $id;?>" class="span_hover" data-toggle="collapse" data-target="#comments<?php echo $id;?>" onclick="return span_comments(<?php echo $id;?>);">查看评论</span>
					<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<!-- 加关注 -->
					<span class="glyphicon glyphicon-plus"></span>
					<span id="span_attention<?php echo $id;?>" class="span_hover" onclick="return span_attention(<?php echo $id;?>);">加关注</span>
					<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<!-- 收藏 -->
					<span class="glyphicon glyphicon-save"></span>
					<span id="span_collect<?php echo $id;?>" class="span_hover" onclick="return span_collect(<?php echo $id;?>);">收藏</span>
				</div>
				
				<div id="comments<?php echo $id;?>" class="collapse comments" >
					<?php
						$re = explode(',', $replay);					
						$re_name = explode(',', $replay_name);
						$re_time = explode(',', $replay_time);
						$jmax = count($re);
						for ($j = 1; $j <= $jmax; $j++) {
							$jout = ($i - 1) * $jmax + $j;
					?>
					
					<div style="border-bottom:1px solid #ddd; margin: 15px 10px;">
						
							<div class="answer">
								<?php
									if ($re[$j-1] != "") {
								?>
								<strong>A<?php echo $j; ?> : </strong>
								<?php
									}
								?>
								<?php
									if ($re[$j-1] != "") {
										echo $re[$j-1];
								?>
									<span class="pull-right" style="cursor: pointer; color: #337ab7;"><?php echo $re_time[$j-1]." ".$re_name[$j-1]; ?></span>
								<?php
									} else {
										echo "亲，还没有评论，期待你的评论~";
									}
								?>
							</div>
							<div style="cursor: pointer; padding-left: 15px; padding-bottom: 15px;" onselectstart="return false;">				
								<?php
									if ($re[$j-1] != "") {
								?>
								<span class="glyphicon glyphicon-thumbs-up"></span>
								<span id="span_zan<?php echo $jout; ?>" class="span_hover" onclick="return zan(<?php echo $jout; ?>);">点赞</span>
								<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
								
								<span class="glyphicon glyphicon-flag"></span>
								<span id="span_jubao<?php echo $jout; ?>" class="span_hover" onclick="return jubao(<?php echo $jout; ?>);">举报</span>
								<?php
									}
								?>
							</div>
					</div>
					<?php
						}
					?>
				</div>
				
				<div id="textbox<?php echo $id; ?>" class="collapse" style="padding-top: 15px;">
					<textarea id="com<?php echo $id; ?>"  placeholder="写下你的评论…" autoHeight="true" class="input_textarea" style="resize: none; min-height: 52px; overflow:hidden;"></textarea>
					<div class="col-md-offset-10">
						<a onclick="return false;" style="text-decoration: none;" data-toggle="collapse" data-parent="" data-target="#textbox<?php echo $id; ?>">
							<button type="button" class="btn btn-default navbar-btn">取消</button>
						</a>
						<a>
							<!--
							<button type="submit" class="btn btn-primary navbar-btn">评论</button>
							-->
							<button onclick="ajax_comments(<?php echo $id; ?>);" class="btn btn-primary navbar-btn">评论</button>
						</a>
					</div>								
				</div>
			</div>
		</div>
		<?php
			}
		?>
		
	</div>
	
	<?php
		require "footer.php";
	?>
	<!--
		
		-->
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
	
	<script src="./js/require.js"></script>
    
	<script src="./js/jquery-1.11.0.min.js"></script>
	
	<script src="./js/autoheight.js"></script>
	<!--
    <script src="./js/jquery.min.js"></script>
	-->
	<script src="./js/bootstrap.min.js"></script>
	
	<script>
	
		function replay(id) {
			alert("comments"+id);
			//$(".comments"+id).addClass('in');
		}
		/*
		$(function() {
			alert($('#user').val());
		});
		*/
		// 查看评论
		function span_comments(id) {
			var text = $('#span_comments'+id).html();
			 if (text == "查看评论") {
				$('#span_comments'+id).html("收起评论");
			 } else {
				$('#span_comments'+id).html("查看评论");
			 }
		}
		// 加关注
		function span_attention(id) {
			var text = $('#span_attention'+id).html();
			 if (text == "加关注") {
				$('#span_attention'+id).html("已关注");
			 } else {
				$('#span_attention'+id).html("加关注");
			 }
		}
		// 收藏
		function span_collect(id) {
			var text = $('#span_collect'+id).html();
			 if (text == "收藏") {
				$('#span_collect'+id).html("已收藏");
			 } else {
				$('#span_collect'+id).html("收藏");
			 }
		}
		// 点赞
		function zan(id) {
			var text = $('#span_zan'+id).html();
			if (text == "点赞") {
				$('#span_zan'+id).html("已赞");
			} else {
				$('#span_zan'+id).html("点赞");
			}
		}
		// 举报
		function jubao(id) {
			 var text = $('#span_jubao'+id).html();
			 if (text == "举报") {
				$('#span_jubao'+id).html("已举报");
			 } else {
				$('#span_jubao'+id).html("举报");
			 }
		}
		// get format date
		function getNowFormatDate() {
			var date = new Date();
			var seperator1 = "-";
			var seperator2 = ":";
			var month = date.getMonth() + 1;
			var strDate = date.getDate();
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			if (strDate >= 0 && strDate <= 9) {
				strDate = "0" + strDate;
			}
			var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
					+ " " + date.getHours() + seperator2 + date.getMinutes()
					+ seperator2 + date.getSeconds();
			return currentdate;
		}
		// send comments
		function ajax_comments(id) {
			//alert(id+" "+$('#com'+id).val());
			if ($('#com'+id).val() == "") {
				alert("评论不能为空!");
				return false;
			}
			$.post(
				'comments.php',
				{
					list_id: id,
					list_data: $('#com'+id).val(),
					list_name: $('#user').val(),
					list_time: getNowFormatDate()
				},
				function(data, status){
					//alert("数据：" + data.status + " data:" +data.content);
					alert("评论成功"/* + data.content*/);
					window.location.href = "http://localhost/tour/chat.php";//window.location.reload();
				},
				"json");
			return false;
		}
		// add comments
		function ajax_add_comments() {
			if ($('#add_comm').val() == "") {
				alert("提问不能为空!");
				return false;
			}
			$.post(
				'addcomments.php',
				{
					comm_title: $('#add_comm').val(),
					comm_title_name: $('#user').val(),
					comm_title_time: getNowFormatDate()
				},
				function(data, status){
					//alert("数据：" + data.status + " data:" +data.content);
					alert("发表提问成功"/* + data.content*/);
					window.location.href = "http://localhost/tour/chat.php";//window.location.reload();
				},
				"json");
			return false;
		}
		function submitfunc(id) {
			alert(id);
			modal_comments_form.submit();
		}
		
		function pop_Regisger() {
			$('#register_modal-dialog').modal('show');
			return false;
		}
		function pop_Login() {
			$('#login_modal-dialog').modal('show');
			return false;
		}
		function ajax_post(form,callback) {
			$.post(form.attr('action'),
			form.serialize(), 
			function(data, status) {
				//alert("数据：" + data.status + "\n状态：" + status);
				if (status == "success") {
					callback(data)
				}
			},
			"json");
		}
		function ajax_login() {
			var form=$("#modal_login_form")
			form.find('.form-group').removeClass('has-error');
			ajax_post(form, function(rep) {
				//$("#content").val(rep.status);
				if (rep.status == "success") {
					//alert("!!");
					window.location.reload();
				} else {
					for (err in rep.errors) {
						gp = form.find("[name='"+err+"']").parent()
						gp.find("label").text(rep.errors[err][0]);
						gp.addClass('has-error')
					}
				}
			});
			//alert("!");
			return false;
		}
		function ajax_logout()
		{
			$.get(
				'logout.php',
				function(data, status){
					//alert("数据：" + data.status+ "\n状态：" + status);
					window.location.href = "http://localhost/tour/login.php";//window.location.reload();
				},
				"json");
			return false;
		}
	</script>

    
    
</body>
</html>